/*
 * 操作日志列表
 * @Author: ljb
 * @Date: 2018-05-22 15:21:47
 * @Last Modified by: ljb
 * @Last Modified time: 2018-10-19 15:50:48
 */
<template>
	<div class="v-admin-operate-log-index">

		<Table
			:columns="columns"
			:loading="loading"
			:data="logs"
			:height="tableHeight()"
			class="personal-scrollbar"
			@on-sort-change="sortable"/>

	</div>
</template>

<script>

import { computedTableHeight } from 'src/views/mixins/computedTableHeight';

export default {
	name: 'OperateLogIndex',
	mixins: [computedTableHeight],
	props: {
		loading: {
			type: Boolean,
			default() {
				return false;
			},
		},
		logs: {
			type: Array,
			default() {
				return [];
			},
		},
		logTypes: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {
			columns: [
				{
					title: this.$t('operate_log.id'),
					key: 'id',
					align: 'center',
					render: (h, { row }) => <div> { row.id || '-' } </div>,
				},
				{
					title: this.$t('operate_log.log_content'),
					key: 'log',
					align: 'center',
					render: (h, { row }) => <div> { row.log || '-' } </div>,
				},
				{
					title: this.$t('operate_log.log_type'),
					key: 'log',
					align: 'center',
					render: (h, { row }) => <div> { this.showLogType(row.log_type_id) } </div>,
				},
				{
					title: this.$t('operate_log.operator'),
					key: 'operate_staff',
					align: 'center',
					render: (h, { row }) => <div>{ row.operate_staff || '-' }</div>,
				},
				{
					title: this.$t('operate_log.operator_type'),
					key: 'operatorable_type',
					align: 'center',
					render: (h, { row }) => <div>{ row.operatorable_type || '-' }</div>,
				},
				{
					title: this.$t('operate_log.ip_address'),
					key: 'ip',
					align: 'center',
					render: (h, { row }) => <div> { !row.ip ? '-' : row.ip } </div>,
				},
				{
					title: this.$t('operate_log.customer'),
					key: 'customer',
					align: 'center',
					render: (h, { row }) => <div> { row.customer ? row.customer.name : this.$t('common.none') } </div>,
				},
				{
					title: this.$t('operate_log.store'),
					key: 'store',
					align: 'center',
					render: (h, { row }) => <div> { row.store ? row.store.name : this.$t('common.none') } </div>,
				},
				{
					title: this.$t('operate_log.log_time'),
					key: 'created_at',
					align: 'center',
					sortable: 'custom',
					render: (h, { row }) => <div> { !row.created_at ? '-' : row.created_at } </div>,
				},
			],
		};
	},
	methods: {
		/**
		 * 排序的回调
		 * @param  {Object} param {columns列表对应sortable属性所包含，key值，order排序字段}
		 * @return {undefined}
		 */
		sortable(param) {
			const search_param = {
				order_by: param.order === 'normal' ? '' : param.key,

				sort: param.order === 'normal' ? '' : param.order.toLocaleUpperCase(),
			};

			this.$emit('sort', search_param);
		},
		/**
		 * 显示日志类型
		 * @param  {String} id {logtype的id}
		 * @return {String} {logtype的name}
		 */
		showLogType(id) {
			const [current_logType] = this.logTypes.filter(log => parseInt(id, 10) === parseInt(log.id, 10));
			return current_logType ? current_logType.name : this.$t('common.unknown');
		},
	},
};
</script>
